@extends('layouts.app')

@section('title', '数据统计')

@section('content-fluid')

<!-- OVERVIEW -->
<div class="panel panel-headline">
	<div class="panel-heading">
		<h3 class="panel-title">今日数据概览</h3>
		<p class="panel-subtitle">{{ date('Y-m-d') }}</p>
	</div>
	<div class="panel-body">
		<div class="row">
			<div class="col-md-4">
				<div class="metric">
					<span class="icon" style="background-color: rgb(255, 99, 132);"><i class="fa fa-download"></i></span>
					<p>
						<span class="number">{{$count['dayRegister']}}</span>
						<span class="title">今日注册</span>
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="metric">
					<span class="icon" style="background-color: rgb(255, 159, 64);"><i class="fa fa-shopping-bag"></i></span>
					<p>
						<span class="number">{{$count['dayOrder']}}</span>
						<span class="title">今日下单</span>
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="metric">
					<span class="icon" style="background-color: rgb(75, 192, 192);"><i class="fa fa-credit-card"></i></span>
					<p>
						<span class="number">{{$count['cardInvalid']}}</span>
						<span class="title">今日可用饭卡</span>
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="metric">
					<span class="icon" style="background-color: rgb(54, 162, 235);"><i class="fa fa-bar-chart"></i></span>
					<p>
						<span class="number">{{$count['daySaleCard']}}</span>
						<span class="title">今日饭卡销售</span>
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="metric">
					<span class="icon" style="background-color: rgb(204,0,255);"><i class="fa fa fa-credit-card"></i></span>
					<p>
						<span class="number">{{$count['couponSale']}}</span>
						<span class="title">今日卡券销售</span>
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="metric">
					<span class="icon" style="background-color: rgb(54, 162, 235);"><i class="fa fa-bar-chart"></i></span>
					<p>
						<span class="number">{{$count['dayActive']}}</span>
						<span class="title">昨日活跃量</span>
					</p>
				</div>
			</div>
		</div>
		<button type="button" class="btn btn-group btn-info monthloadBtn" style="margin-bottom: 15px;" onclick="monthTab()">查看本月</button>
		<div class="btn-group" data-toggle="buttons" style="margin-bottom: 15px;">
		  <label class="btn btn-primary lastweek">
		    <input type="radio" name="options" id="option1" autocomplete="off"> 上周
		  </label>
		  <label class="btn btn-primary nextweek">
		    <input type="radio" name="options" id="option2" autocomplete="off"> 下周
		  </label>
		</div>
		<div class="row" style="margin-right: -26px;margin-left: -21px;">
			<div class="col-md-12" style="padding-right:0px;padding-left:0px;">
				<canvas id="canvas" height="90"></canvas>
			</div>
		</div>
		<div class="btn-group month_tab" data-toggle="buttons" style="margin-bottom: 15px;display: none;">
		  <label class="btn btn-primary lastmonth">
		    <input type="radio" name="options" id="option1" autocomplete="off"> 上月
		  </label>
		  <label class="btn btn-primary nextmonth">
		    <input type="radio" name="options" id="option2" autocomplete="off"> 下月
		  </label>
		</div>
		<div class="row" style="margin-right: -26px;margin-left: -21px;">
			<div class="col-md-12" style="padding-right:0px;padding-left:0px;">
				<canvas id="canvas_month" height="90"></canvas>
			</div>
		</div>
	</div>
</div>
<!-- END OVERVIEW -->
@endsection

@section('js-write')
<script>
	$(function() {
		if(getQueryString('selday')){
			var data = {'selday':getQueryString('selday').trim()};
		}else{
			var data = {};
		}
		function getCount(time)
		{
			window.location.href = '/?selday='+time;
		}

		$.ajaxSetup({
		    headers: {
		        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		    }
		});
		$.post('/weekCount',data,weekdataAction);
		function weekdataAction(response){
			var data, options;
			var weekdata = {};
			if(response.success){
				weekdata.active = objToArray(response.data.weekActive);// 今日登陆用户
				weekdata.register = objToArray(response.data.weekRegister);// 今日注册
				weekdata.order = objToArray(response.data.weekOrder);// 今日下单量
				weekdata.salecard = objToArray(response.data.weekSaleCard);//饭卡出售
				weekdata.couponSale = objToArray(response.data.couponSale);//今日卡券销售

				var nowdate = new Date();// response.nextsunday*1000

				var times = Math.round(nowdate / 1000);// nowdate.getDay()  nowdate.format('yyyy-MM-dd')
				
				var nowSunday = new Date((times-((nowdate.getDay()==0?7:nowdate.getDay()) - 7) * 24 * 3600)*1000).format('yyyy-MM-dd');

				if((new Date(nowSunday+' 23:59:59')/1000) < response.nextsunday){
					$('.nextweek').addClass('disabled');
					var datalist = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
				}else{
					$('.nextweek').unbind('click');
					$('.nextweek').click(function(){
						getCount(response.nextsunday);
					});
					var datalist = response.weekYmd;
				}
				$('.lastweek').unbind('click');
				$('.lastweek').click(function(){
					getCount(response.lastsunday);
				});

				var config = {
					type: 'line',
					data: {
						labels: datalist,
						datasets: [ {
							label: '注册量',
							fill: false,
							backgroundColor: "rgb(255, 99, 132)",
							borderColor: "rgb(255, 99, 132)",
							data: weekdata.register,
						}, {
							label: '下单数',
							backgroundColor: "rgb(255, 159, 64)",
							borderColor: "rgb(255, 159, 64)",
							data: weekdata.order,
							fill: false,
						}, {
							label: '活跃量',
							fill: false,
							backgroundColor: "rgb(75, 192, 192)",
							borderColor: "rgb(75, 192, 192)",
							data: weekdata.active,
						}, {
							label: '饭卡出售',
							fill: false,
							backgroundColor: "rgb(54, 162, 235)",
							borderColor: "rgb(54, 162, 235)",
							data: weekdata.salecard,
						}, {
							label: '卡券出售',
							fill: false,
							backgroundColor: "rgb(204,0,255)",
							borderColor: "rgb(204,0,255)",
							data: weekdata.couponSale,
						}]
					},
					options: {
						responsive: true,
						title: {
							display: false,
							text: '嘉时乐享数据统计'
						},
						tooltips: {
							mode: 'index',
							intersect: false,
						},
						hover: {
							mode: 'nearest',
							intersect: true
						},
						scales: {
							xAxes: [{
								display: true,
								scaleLabel: {
									display: false,
									labelString: '周'
								}
							}],
							yAxes: [{
								display: true,
								scaleLabel: {
									display: false,
									labelString: '量'
								}
							}]
						}
					}
				};
				var ctx = document.getElementById('canvas').getContext('2d');
				window.myLine = new Chart(ctx, config);
			}else{
				toastr.warning('周数据获取失败！');
			}
		}
		
	});
	function monthTab(){
		    $('.monthloadBtn').addClass('disabled');
			$.post('/count/month',{},monthdataAction);
		}
		function monthdataAction(response){
			$('.month_tab').css('display','block');
			var data, options;
			var weekdata = {};
			if(response.success){
				weekdata.active = objToArray(response.data.weekActive);// 今日登陆用户
				weekdata.register = objToArray(response.data.weekRegister);// 今日注册
				weekdata.order = objToArray(response.data.weekOrder);// 今日下单量
				weekdata.salecard = objToArray(response.data.weekSaleCard);//饭卡出售
				weekdata.couponSale = objToArray(response.data.couponSale);//今日卡券销售

				var nowdate = new Date();// response.nextsunday*1000

				var times = Math.round(nowdate / 1000);// nowdate.getDay()  nowdate.format('yyyy-MM-dd')
				
				var nowSunday = new Date((times-((nowdate.getDay()==0?7:nowdate.getDay()) - 7) * 24 * 3600)*1000).format('yyyy-MM-dd');

				if((new Date(nowSunday+' 23:59:59')/1000) < response.nextsunday){
					var datalist = response.month.Ymd;
				}else{
					var datalist = response.month.Ymd;
				}

				var config = {
					type: 'line',
					data: {
						labels: datalist,
						datasets: [ {
							label: '注册量',
							fill: false,
							backgroundColor: "rgb(255, 99, 132)",
							borderColor: "rgb(255, 99, 132)",
							data: weekdata.register,
						}, {
							label: '下单数',
							backgroundColor: "rgb(255, 159, 64)",
							borderColor: "rgb(255, 159, 64)",
							data: weekdata.order,
							fill: false,
						}, {
							label: '活跃量',
							fill: false,
							backgroundColor: "rgb(75, 192, 192)",
							borderColor: "rgb(75, 192, 192)",
							data: weekdata.active,
						}, {
							label: '饭卡出售',
							fill: false,
							backgroundColor: "rgb(54, 162, 235)",
							borderColor: "rgb(54, 162, 235)",
							data: weekdata.salecard,
						}, {
							label: '卡券出售',
							fill: false,
							backgroundColor: "rgb(204,0,255)",
							borderColor: "rgb(204,0,255)",
							data: weekdata.couponSale,
						}]
					},
					options: {
						responsive: true,
						title: {
							display: false,
							text: '嘉时乐享数据统计'
						},
						tooltips: {
							mode: 'index',
							intersect: false,
						},
						hover: {
							mode: 'nearest',
							intersect: true
						},
						scales: {
							xAxes: [{
								display: true,
								scaleLabel: {
									display: false,
									labelString: '周'
								}
							}],
							yAxes: [{
								display: true,
								scaleLabel: {
									display: false,
									labelString: '量'
								}
							}]
						}
					}
				};
				var ctx = document.getElementById('canvas_month').getContext("2d");
				window.myLine = new Chart(ctx, config);
			}else{
				toastr.warning('月数据获取失败！');
			}
		}
	</script>
@endsection